﻿function AQIChart(container, jsonData) {
    this.AQIs = [];
    this.timepoints = [];

    this.container = container;
    this.jsonData = jsonData;
    this.initData();

}

AQIChart.prototype.initData = function () {
    var aqiChart = this;
    if (aqiChart.jsonData.length > 0) {
        var data = aqiChart.jsonData;
        for (var i = 0; i < data.length; i++) {
            aqiChart.AQIs.push(data[i].AQI);
            aqiChart.timepoints.push(aqiChart.formatDate(aqiChart.GetTimeFromJsonString(data[i].TimePoint), "MM月DD日"))
        }
        this.createChart();
    }
};

AQIChart.prototype.createChart = function () {
    var aqiChart = this;
    this.chart = new Highcharts.Chart(this.getChartOptions(), function (chart) {
        aqiChart.onChartLoad(chart);
    });
};

AQIChart.prototype.onChartLoad = function (chart) {
    this.removeLogo();
};

AQIChart.prototype.removeLogo = function () {
    var chartText = $("text[text-anchor='end']");
    chartText.each(function () {
        if ($(this).text() == 'Highcharts.com') {
            $(this).remove();
        }
    });
}






AQIChart.prototype.getChartOptions = function () {
    var aqiChart = this;
    return {
        chart: {
            renderTo: this.container,
            height:460
        },
        title: {
            text: ''
        },
        xAxis: [{
            categories: this.timepoints,
            plotBands: [{
                color: "#E0E9FF",
                from:-0.5,
                to: 6.5,
                label:{
                    align: 'center',
                    text: '实况',
                    style: {
                        color: '#4992C7',
                        fontWeight:'bold'
                    }
                }
            }, {
                color: "#E1FFC7",
                from: 6.5,
                to: 14.5,
                label: {
                    align: 'center',
                    text: '预报',
                    style: {
                        color: '#375830',
                        fontWeight: 'bold'
                    }
                }
            }]
        }],
        yAxis: [{
            title: {
                text: null
            },
            labels: {
                style: {
                    fontSize: '10px'
                }
            }
        }],
        legend: {
            align: 'center',
            verticalAlign: 'top'
        },
        tooltip: {
            enabled: false
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },

        series: [{
            name: '城市AQI值',
            type: 'spline',
            data: this.AQIs
        }]
    }
};


AQIChart.prototype.tooltipFormatter = function (tooltip) {
    var ret = '<middle>' + tooltip.x + '</middle><br>';
    ret += '<table>';

    Highcharts.each(tooltip.points, function (point) {
        var series = point.series;
        ret += '<tr><td><span style="color:' + series.color + '">\u25CF</span> ' + series.name +
               ': </td><td style="white-space:nowrap">' + Highcharts.pick(point.point.value, point.y) + '</td></tr>';
    });


    ret += '</table>';

    return ret;


};



AQIChart.prototype.formatDate = function (date, format) {
    if (arguments.length < 2 && !date.getTime) {
        format = date;
        date = new Date();
    }
    typeof format != 'string' && (format = 'YYYY年MM月DD日 hh时mm分ss秒');
    var week = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', '日', '一', '二', '三', '四', '五', '六'];
    return format.replace(/YYYY|YY|MM|DD|hh|mm|ss|星期|周|www|week/g, function (a) {
        switch (a) {
            case "YYYY": return date.getFullYear();
            case "YY": return (date.getFullYear() + "").slice(2);
            case "MM": return date.getMonth() + 1;
            case "DD": return date.getDate();
            case "hh": return date.getHours() + "时";
            case "mm": return date.getMinutes();
            case "ss": return date.getSeconds();
            case "星期": return "星期" + week[date.getDay() + 7];
            case "周": return "周" + week[date.getDay() + 7];
            case "week": return week[date.getDay()];
            case "www": return week[date.getDay()].slice(0, 3);
        }
    });
}

//将json时间转换成javascript时间

AQIChart.prototype.GetTimeFromJsonString = function (jsonTime) {
    var re = /-?\d+/;
    var m = re.exec(jsonTime);
    var d = new Date(parseInt(m[0]));
    return d;
}